<template>
  <basic-container>
    <el-tabs type="border-card" class="tab-font">
      <el-tab-pane label="搜索"> </el-tab-pane>
      <avue-form ref="form" :option="formOption" v-model="form">
        <template slot="btn">
          <el-button type="primary" size="small" class="el-icon-search" @click="handleSubmit">搜索</el-button>
          <el-button size="small" class="el-icon-delete" @click="handleCancel">清空</el-button>
        </template>
      </avue-form>
    </el-tabs>
    <el-tabs type="border-card" class="chart-tab tab-font">
      <el-tab-pane label="明细"></el-tab-pane>
      <el-col :span="24" class="tab-container">
        <el-dropdown @command="handleExport">
          <el-button type="warning" size="small">导出<i class="el-icon-download"></i> </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="pdf">PDF视图</el-dropdown-item>
            <el-dropdown-item command="excel">Excel表格</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <chart-view class="chart-content" :chart-option="chartOption" :auto-resize="true" width="100%" />
        <avue-crud :option="tableOption" :table-loading="loading" :data="data" :page="tablePage" @current-change="currentChange" @size-change="sizeChange" ref="crud">
        </avue-crud>
      </el-col>
    </el-tabs>
    <export-comp
      ref="exportComp"
      page-api-url="mes-product/qms-inspection-document-report/pass-rate/page"
      :option="tableOption"
      :page="tablePage"
      :query="exportParams"
      file-name="FQC检验合格率报表"
    ></export-comp>
    <export-pdf
      ref="exportPdf"
      url="/api/mes-product/qms-inspection-document-report/pass-rate/page"
      name="FQC检验合格率报表"
      :option="tableOption"
      :chartOption="chartOption"
      :page="tablePage"
      :query="exportParams"
      :data="data"
      :pdfConfig="pdfConfig"
    ></export-pdf>
  </basic-container>
</template>

<script>
import ExportComp from '@/components/export-comp';
import { chartOption, getFormOption, tableOption } from './completionInspectionReport.js';
import ChartView from '@/components/chart/index.vue';
import { getQualityList } from '@/api/report/report';
import ExportPdf from '@/components/export-pdf/index.vue';

export default {
  name: 'completionInspectionReport',
  components: {
    ExportComp,
    ChartView,
    ExportPdf
  },
  data() {
    return {
      formOption: getFormOption,
      form: {},
      pdfConfig: { unit: 'pt', format: 'a4', orientation: 'portrait' },
      tableOption: tableOption,
      exportParams: {},
      data: [],
      loading: false,
      chartOption: chartOption,
      tablePage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      }
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid, done) => {
        if (valid) {
          this.onLoad();
          done();
        }
      });
    },
    handleCancel() {
      this.$refs.form.resetForm();
      this.tablePage = {
        pageSize: 20,
        currentPage: 1,
        total: 0
      };
      this.data = [];
      this.setChartOption([]);
    },
    onLoad() {
      console.log('onLoad');
      const formData = this._cloneDeep(this.form);
      const params = {
        current: this.tablePage.currentPage,
        size: this.tablePage.pageSize,
        documentType: 'FQC',
        ...formData
      };
      if (this.form.examineDate.length > 0) {
        params.startTime = this.form.examineDate[0];
        params.endTime = this.form.examineDate[1];
        delete params.examineDate;
      }
      this.loading = true;
      getQualityList(params)
        .then((res) => {
          let data = res.data.data;
          this.data = data.records || [];
          this.tablePage.total = data.total;
          try {
            this.setChartOption(data.records || []);
          } catch (e) {
            console.log(e);
          }
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false;
        });
    },
    currentChange(currentPage) {
      this.tablePage.currentPage = currentPage;
      this.onLoad();
    },
    setChartOption(data = []) {
      let xAxisList = [];
      let targetValueList = [];
      let passRateList = [];
      data.forEach((item) => {
        const label = item.lineName ? `${item.date}+${item.lineName}` : `${item.date}`;
        xAxisList.push(label);
        targetValueList.push(item.targetValue ? Number(item.targetValue) : 0);
        passRateList.push(item.passRate ? Number(item.passRate) : 0);
      });
      const series = [
        {
          name: '目标值',
          type: 'line',
          data: targetValueList,
          color: ['#75BD42'],
          tooltip: {
            valueFormatter: function (value) {
              return value + ' %';
            }
          }
        },
        {
          name: '合格率',
          type: 'bar',
          data: passRateList,
          barWidth: 40,
          color: ['#30C0B4'],
          tooltip: {
            valueFormatter: function (value) {
              return value + ' %';
            }
          }
        }
      ];
      const xAxis = {
        type: 'category',
        data: xAxisList,
        axisLabel: {
          formatter: function (value) {
            let date = value.split('+')[0] ? value.split('+')[0] : '';
            let lineName = value.split('+')[1] ? value.split('+')[1] : '';
            let shiftGroupName = value.split('+')[2] ? value.split('+')[2] : '';
            return `${shiftGroupName}\n${lineName}\n${date}`;
          },
          interval: 0,
          rotate: 45
        },
        axisTick: {
          alignWithLabel: true
        }
      };
      this.$set(this.chartOption, 'xAxis', xAxis);
      this.$set(this.chartOption, 'series', series);
    },
    handleExport(val) {
      const formData = this._cloneDeep(this.form);
      const params = {
        current: this.tablePage.currentPage,
        size: this.tablePage.pageSize,
        documentType: 'FQC',
        ...formData
      };
      if (this.form.examineDate.length > 0) {
        params.startTime = this.form.examineDate[0];
        params.endTime = this.form.examineDate[1];
        delete params.examineDate;
      }
      this.exportParams = params;
      if (val === 'excel') {
        this.$refs.exportComp.visible = true;
      } else {
        this.$refs.exportPdf.openDialog();
      }
    },
    sizeChange(pageSize) {
      this.tablePage.pageSize = pageSize;
      this.onLoad();
    }
  }
};
</script>

<style scoped lang="scss">
.chart-tab {
  margin-top: 24px;
  height: calc(100vh - 350px);
  overflow-y: scroll;
}
.chart-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab-font {
  ::v-deep .el-tabs__item {
    color: #606266 !important;
    font-weight: bold;
  }
}
</style>
